<template>
  <page-header-wrapper :title="false">
    <a-card>
<!--      <template slot="extra">-->
<!--        <a-button size="small" type="primary" icon="setting" @click="onSetting">批量设置</a-button>-->
<!--      </template>-->
      <div class="table-page-search-wrapper">
        <a-form-model
          layout="inline"
          :model="queryParam"
        >
          <a-row :gutter="15">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="合同编号">
                <a-input v-model="queryParam['filter[contract_no]']" placeholder="请输入合同编号" :allowClear="true" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="业务编号">
                <a-input v-model="queryParam['filter[business_no]']" placeholder="请输入业务编号" :allowClear="true" />
              </a-form-model-item>
            </a-col>
            <template v-if="advanced">
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="商标名称">-->
<!--                  <a-input v-model="queryParam['filter[sb_name]']" placeholder="请输入商标名称" :allowClear="true" />-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
              <a-col :md="6" :sm="24">
                <a-form-model-item label="业务名称">
<!--                  <a-select v-model="queryParam['filter[business_id]']" placeholder="请选择业务名称" :allowClear="true">-->
<!--                    <a-select-option v-for="(item, index) in businessOpts" :key="index" :value="item.business_id">{{item.name}}</a-select-option>-->
<!--                  </a-select>-->
                  <a-input v-model="queryParam['filter[business_name]']" placeholder="请输入业务名称" :allowClear="true" />
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="开启时间">
                  <a-range-picker @change="onChangeTime" v-model="queryParam['open_time_start']"/>
                </a-form-item>
              </a-col>
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="商标注册号">-->
<!--                  <a-input v-model="queryParam['filter[sb_reg_no]']" placeholder="请输入商标注册号" :allowClear="true" />-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="未填写注册号">-->
<!--                  <a-select v-model="queryParam['filter[is_reg_no]']" placeholder="请选择是否填写了注册号/申请号" :allowClear="true">-->
<!--                    <a-select-option :value="1">填写注册号</a-select-option>-->
<!--                    <a-select-option :value="100">未填写注册号</a-select-option>-->
<!--                  </a-select>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
              <a-col :md="6" :sm="24">
                <a-form-model-item label="是否上传">
                  <a-select v-model="queryParam['filter[is_state]']" placeholder="请选择是否上传了回执类文件" :allowClear="true">
                    <a-select-option :value="1">已上传</a-select-option>
                    <a-select-option :value="100">未上传</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="所属顾问">
                  <a-select
                    show-search
                    v-model="queryParam['filter[adviser_uid]']"
                    placeholder="请选择所属顾问"
                    :filter-option="filterOption"
                  >
                    <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class='table-page-search-submitButtons' :style="advanced && { float: 'right', overflow: 'hidden' } || {}">
                <a-button type="primary" @click="$refs.table.refresh(true)">搜索</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="table-operator">
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.cb_id"
          :columns="tradeColumns"
          :data="receiptData"
        >
          <!--          <div slot="title">-->
          <!--            <a-button type="primary" size="small">批量上传</a-button>-->
          <!--            <a-button type="primary" size="small">导入回执</a-button>-->
          <!--          </div>-->
          <template slot="contract_no" slot-scope="text,record">
            <a-popover trigger="hover">
              <template slot="content">
                <p>合同编号：{{text}}<a-divider type="vertical" /><a-icon class="copy" :data-clipboard-text="text" type="copy" @click="copy" /></p>
                <p>业务编号：{{record.business_no}}<a-divider type="vertical" /><a-icon class="copy" :data-clipboard-text="record.business_no" type="copy" @click="copy" /></p>
              </template>
              {{text}}<br>
              <a @click="toDetail(record.cb_id)">{{record.business_no}}</a>
            </a-popover>
          </template>
          <template slot="adviser" slot-scope="text, record">
            <a-tag>{{text}}</a-tag><br>
            <a-tag>{{record.group_type}}组</a-tag><br>
            <a-tag>{{record.leader}}</a-tag>
          </template>
          <template slot="sb_reg_no" slot-scope="text, record">
            {{text}}<br>
            {{record.official_order_no}}
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button size="small" type="primary" @click="trademarkModal(record.cb_id)">添加回执</a-button>
            <a-button size="small" type="default" @click="toDetail(record.cb_id)">查看</a-button>
          </template>
          <template slot="filename" slot-scope="text, record">
            <a @click="download(record.file_url, text)">{{text}}</a>
          </template>
          <template slot="state_name" slot-scope="text">
            <a-tag color="red">{{text}}</a-tag>
          </template>
          <template slot="status2" slot-scope="text">
            <a-tag color="red">{{text}}</a-tag>
          </template>
          <template slot="cost_fee" slot-scope="text">
            <a-tag color="red">{{text}}元</a-tag><br>
          </template>
        </s-table>
      </div>
      <a-modal
        centered
        :destroy-on-close="true"
        title="ISO业务"
        :confirm-loading="loading"
        v-model="trademarkVisible"
        @ok="submitTrademark"
      >
        <a-form-model :label-col="tklabelCol" :wrapper-col="tkwrapperCol">
<!--          <a-form-model-item label="商标名称" >-->
<!--            <a-input type="text" placeholder="请输入商标名称" v-model="changeForm.sb_name"/>-->
<!--          </a-form-model-item>-->
<!--          <a-form-model-item label="商标类别" >-->
<!--            <a-input type="text" placeholder="请输入商标类别" v-model="changeForm.sb_category"/>-->
<!--          </a-form-model-item>-->
<!--          <a-form-model-item label="商标注册号" >-->
<!--            <a-input type="text" placeholder="请输入商标注册号" v-model="changeForm.sb_reg_no"/>-->
<!--          </a-form-model-item>-->
<!--          <a-form-model-item label="官方申请号" >-->
<!--            <a-input type="text" placeholder="请输入官方申请号" v-model="changeForm.official_order_no"/>-->
<!--          </a-form-model-item>-->
          <a-form-model-item label="回执类型">
            <a-select v-model="changeForm.state_id">
              <a-select-option v-for="(item,index) in receiptList" :key="index" :value="index">{{item}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="回执文件">
            <a-upload
              name="file"
              :action="uploadUrl"
              :headers="headers"
              :before-upload="beforeUpload"
              @change="onChange"
            >
              <a-button size="small" type="primary" icon="upload">上传回执文件</a-button>
            </a-upload>
          </a-form-model-item>
        </a-form-model>
        <a-form-model-item label="回执历史">
          <a-timeline v-if="receiptState.length > 0">
            <a-timeline-item v-for="(item,index) in receiptState" :key="index">
              {{item.created_at}}  {{item.uid}}  添加回执【{{item.state_name}}】  <a :href="item.file">{{item.filename}}</a>  <a-button size="small" type="link" icon="delete" @click="delState(item.cbs_id)">删除</a-button>
            </a-timeline-item>
          </a-timeline>
        </a-form-model-item>
      </a-modal>
    </a-card>
    <batch-action v-if="settingsVisible" @cancel="onSetCancel"></batch-action>
  </page-header-wrapper>
</template>

<script>
  import Clipboard from 'clipboard'
  import { STable, Ellipsis } from '@/components'
  import { getCollectList, getReceiptList, getReceiptState, postReceiptState, getReceiptDelete } from '@/api/iso.process'
  import isoColumns from '@/columns/iso.process'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import apis from '@/api'
  import BatchAction from '@/views/tm-process/components/BatchAction'

  export default {
    name: 'Information',
    components: {
      BatchAction,
      STable,
      Ellipsis
    },
    data () {
      return {
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        },
        // 多选框样式
        checkStyle: {
          display: 'block',
          height: '40px',
          lineHeight: '40px'
        },
        // 表单输入控件样式
        tklabelCol: { span: 4 },
        tkwrapperCol: { span: 14, offset: 1 },
        labelCol: { span: 8 },
        wrapperCol: { span: 14, offset: 1 },
        // 确定按钮加载事件
        loading: false,
        advanced: true,
        // 控制编辑弹窗显示/隐藏
        trademarkVisible: false,
        // 控制回执弹窗显示/隐藏
        receiptVisible: false,
        receiptList: {},
        receiptState: {},
        receiptForm: {},
        changeForm: {
          sb_name: '',
          sb_category: '',
          sb_reg_no: '',
          state_id: '',
          official_order_no: ''
        },
        businessOpts: {},
        radioStyle: {
          display: 'block',
          height: '40px',
          lineHeight: '40px'
        },
        queryParam: {},
        searchSource: [],
        uploadUrl: apis.Upload,
        tradeColumns: isoColumns.tradeinformation,
        receiptData: parameters => {
          return getCollectList(Object.assign(parameters, this.queryParam)).then(res => {
            this.businessOpts = res.result.businesses
            this.adviserOpts = res.result.adviserOpts
            return res.result
          })
        },
        settingsVisible: false,
        adviserOpts: {}
      }
    },
    methods: {
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      reset () {
        this.queryParam = {}
        this.$refs.table.refresh(true)
      },
      onChangeTime (date, dateString) {
        this.queryParam['filter[open_time_start]'] = dateString[0]
        this.queryParam['filter[open_time_end]'] = dateString[1]
      },
      // 编辑弹窗确定按钮事件
      trademarkModal (id) {
        const app = this
        app.changeForm['cb_id'] = id
        app.trademarkVisible = true
        getReceiptState(id).then(res => {
          if (res.status === 0) {
            app.receiptList = res.result.state_opts
            app.getHistoryData(app.changeForm['cb_id'])
          }
        })
      },
      submitTrademark () {
        const app = this
        const eData = {}
        app.loading = true
        if (app.changeForm.state_id !== '' && app.changeForm.file !== '') {
          eData['contract_business_state[file]'] = app.changeForm.file
          eData['contract_business_state[filename]'] = app.changeForm.filename
          eData['contract_business_state[state_id]'] = app.changeForm.state_id
          postReceiptState(app.changeForm['cb_id'], eData).then(res => {
            if (res.status === 0) {
              app.trademarkVisible = false
              app.loading = false
              app.$refs.table.refresh()
            }
          })
        } else {
          app.$message.error('回执信息不能为空!')
          app.loading = false
        }
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      toDetail (id) {
        this.$router.push({ name: 'IsoEdit', params: { id } })
      },
      onSetCancel (visible) {
        this.settingsVisible = visible
      },
      copy () {
        const clipboard = new Clipboard('.copy')
        clipboard.on('success', e => {
          this.$message.success('复制成功')
        })
        clipboard.on('error', e => {
          this.$message.error('复制失败')
        })
      },
      getHistoryData (id) {
        getReceiptList(id).then(res => {
          if (res.status === 0) {
            this.receiptState = res.result.data
          }
        })
      },
      // 状态单选按钮
      onChangeStatus (e) {
        this.receiptForm.state_id = e.target.value
      },
      // 文件上传
      onChange (info) {
        if (info.file.status === 'uploading') {
          return false
        }
        if (info.file.status === 'done') {
          this.changeForm['filename'] = info.file.name
          this.changeForm['file'] = info.file.response.result.url
          this.getHistoryData(this.changeForm['cb_id'])
        }
      },
      beforeUpload (file) {
        const format = file.type === 'application/pdf'
        if (!format) {
          this.$message.error('请上传pdf格式文件!')
        }
        return format
      },
      download (value, filename) {
        window.open(apis.Download + '?value=' + value + '&filename=' + filename)
      },
      cancelReceipt () {
        this.$refs.table.refresh()
      },
      delState (id) {
        const app = this
        app.$confirm({
          title: '是否删除官方状态',
          onOk: () => {
            getReceiptDelete(id).then(res => {
              if (res.status === 0) {
                app.getHistoryData(app.changeForm['cb_id'])
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      },
      onSetting () {
        this.settingsVisible = true
      }
    }
  }
</script>

<style scoped>

</style>
